<template>
	<view>
		<view class="top">
			<view class="avator">
				<img :src='img' alt="">
			</view>
			<span class="nickName">
				{{nickName}}
			</span>
			<view class="sex">
				<img v-if="sex === '男'" src="@/assets/img/man.png" alt="">
				<img v-if="sex === '女'" src="@/assets/img/woman.png" alt="">
			</view>
			<view v-if="vip" class="vipTag">
				<img src="@/assets/img/vip.png" alt="">
				<span>{{vip}}</span>
			</view>
			<span class="real" v-if="isReal">
				已实名
			</span>
			<span style="color:#999" class="real" v-else>
				未实名
			</span>
		</view>
	</view>
</template>

<script>
	export default {
		name: "avator",
		props: ['img', 'nickName', 'sex', 'vip', 'isReal'],
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	.top {
		display: flex;
		align-items: center;
		flex-direction: row;
		width: 100%;
		flex-shrink: 0;
		flex-basis: 0;

		.avator {
			img {
				border-radius: 100px;
				width: 50px;
				height: 50px;
				padding: 10px;
			}
		}

		.real {
			font-size: 13px;
			color: #41C4D3;
		}

		.nickName {
			color: #666;
			font-size: 18px;
			position: relative;
			margin-right: 5px;
		}

		.sex {
			margin: 0 5px;

			img {
				width: 7px;
				height: 9px;
			}
		}

		.tag {
			padding: 0 3px;
			margin: 0 2px;
			position: relative;
			bottom: 8px;
			color: #444;
			border-radius: 4px;
			font-size: 11px;
		}

		.join-vip {
			width: 47px;
			height: 17px;
			border: 1px solid #FC9380;
			border-radius: 15px;
			font-size: 10px;
			font-family: SimHei;
			color: #FC9380;
			position: absolute;
			right: 20px;
			text-align: center;
			padding: 2px 3px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.vipTag {
			font-size: 10px;
			font-family: SimHei;
			color: #E16531;
			margin-right: 5px;
			display: flex;
			align-items: center;
			flex-direction: row;

			img {
				margin-right: 2px;
				width: 9px;
				height: 9px;
			}

		}

		.realTag {
			margin-left: 10px;
			background: #8DCFF4;
			border-radius: 3px;
			font-size: 8px;
			font-family: SimHei;
			color: #FFFFFF;
			padding: 1px 3px;
		}
	}
</style>
